<template>
  <div >
    <div >
      <el-row class="mytop">
        <el-col :span="5" >
          <span style="color: rgba(0, 51, 204,0.8);font-weight: bold"> <i class="el-icon-stopwatch"></i>
            当前时间:
          {{nowtime}}
          </span>
        </el-col>
        <el-col :span="8" :offset="4">
          <el-date-picker
            v-model="datatime"
            @change="getAllData()"
            value-format="yyyy/MM/dd"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row>
        <el-col class="myleft" :span="11" >
          <el-row>
            <el-col :span="8">
              <div id="main" style="width: 600px;height:400px;"></div>
            </el-col>
          </el-row>
        </el-col>
        <el-col class="myright" :span="11" :offset="1">
          <el-row>
            <el-col :span="24">
              <div id="right" style="width: 600px; height:400px;"></div>
            </el-col>
          </el-row>

        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  let echarts = require('echarts');
  import '../js/infographic.js'
  export default {
    name: "StatisticalView",
    data() {
      return {
        datatime: [],
        companyRunningWater: [],
        data1: [],
        data2: [],
        data3:[],
        nowtime:"",
      }
    },
    methods: {
      getTime(){
        setInterval(()=>{
          this.nowtime = new Date().toLocaleString();
        },1000)
      },
      getAllData(){
        this.getData();
        this.getCircle();
      },
      setNewTime() {
        let d = new Date();
        let year = d.getFullYear();
        let month = d.getMonth() + 1;
        this.datatime[0] = year + '/' + month + '/' + 1;
        this.datatime[1] = year + '/' + month + '/' + 30;
      },
      getData() {
        this.data1=[];
        this.data2=[];
        let params = {}
        params['rtype'] = 1;
        params['uid'] = 10;
        params["startTime"] = this.datatime[0];
        params["endTime"] = this.datatime[1];
        this.$axios
          .get("queryWaters.action", {params: params})
          .then(res => {
            if (res.data.length>0){
              this.companyRunningWater = res.data;
              this.companyRunningWater.forEach(item => {
                this.data1.push(item.rdate);
                this.data2.push(item.rmoney)
              })
            }else {
              this.data1=[];
              this.data2=[];
              this.$message.warning("暂无数据")
            }
            this.setData();
          }).catch(error => {
          this.$message.error(error)
        })
      },
      setData() {
        var _this = this
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        let data = {
          title: {
            text: '本月营收',
          },
          xAxis: {
            type: 'category',
            data: _this.data1
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: _this.data2,
              type: 'bar'
            }
          ]
        };
        myChart.setOption(data);
      },
      getCircle(){
        this.data3=[];
        let params = {}
        params["startTime"] = this.datatime[0];
        params["endTime"] = this.datatime[1];
        this.$axios
          .get("queryBuyNum.action", {params: params})
          .then(res => {
            if (res.data.length>0){
             res.data.forEach(item=>{
               let obj={
                 value:item.shopUpnum,
                 name:item.shopName
               }
               this.data3.push(obj);
             })
            }else {
              this.data3=[];
              this.$message.warning("暂无数据")
            }
            this.setCircle();
          }).catch(error => {
          this.$message.error(error)
        })
      },
      setCircle(){
        var _this = this
        var myChart = echarts.init(document.getElementById('right'));
        let data  = {
          title: {
            text: '本月前10商品销售量',
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: _this.data3
            }
          ]
        };
        myChart.setOption(data);
      },
    },
    mounted () {
      this.setNewTime();
      this.getAllData();
      this.getTime();
    }

  }
</script>

<style scoped>
  .mytop {
    padding-top: 20px;
    margin-bottom: 20px;
  }
  .myleft{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 10px;
    border-radius: 10px;
    padding: 10px;
    background-color: #ffffff;
  }
  .myright{
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 10px;
    background-color: #ffffff;
  }

</style>
